<style type="text/css">
  /*圆圈旋转动画*/
  .round-wrap {
    background: #0072c6;
    padding: 1rem 0;
    height: 100%;
  }

  .round-animate {
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
  }

  .round-animate img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: top;
  }

  .round-animate .round-scan-light,
  .round-animate .round-scan,
  .round-animate .round-light,
  .round-animate .round-inner,
  .round-animate .round-outer {
    width: 100%;
    height: 100%;
    background: url("#module.path/images/round-outer.png") center no-repeat;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }

  .round-animate .round-light {
    background-image: url("#module.path/images/round-light.png");
  }

  .round-animate .round-inner {
    background-image: url("#module.path/images/round-inner.png");
  }

  .round-animate .round-scan {
    background-image: url("#module.path/images/round-scan.png");
  }

  .round-animate .round-scan-light {
    background-image: url("#module.path/images/round-scan-light.png");
  }

  /*动画CSS*/
  .animate-rotation {
    -webkit-animation: rotate 30s infinite linear;
    animation: rotate 30s infinite linear;
  }

  .animate-rotation-reverse {
    -webkit-animation: rotateReverse 4s infinite ease-out;
    animation: rotateReverse 4s infinite ease-out;
  }

  .animate-rotation-inner {
    -webkit-animation: rotateReverse 8s infinite linear;
    animation: rotateReverse 8s infinite linear;
  }

  .animate-zoom {
    -webkit-animation: zoom 1s infinite ease-out;
    animation: zoom 1s infinite ease-out;
  }

  .animate-translateY {
    -webkit-animation: translateY 4s infinite ease-out;
    animation: translateY 4s infinite ease-out;
  }

  @-webkit-keyframes rotate {
    0% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(-360deg);
    }
  }

  @keyframes rotate {
    0% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(-360deg);
    }
  }

  @-webkit-keyframes rotateReverse {
    0% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes rotateReverse {
    0% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @-webkit-keyframes zoom {
    0% {
      -webkit-transform: scale(0.9);
    }

    70% {
      -webkit-transform: scale(1);
    }

    100% {
      -webkit-transform: scale(0.9);
    }
  }

  @keyframes zoom {
    0% {
      -webkit-transform: scale(0.9);
    }

    70% {
      -webkit-transform: scale(1);
    }

    100% {
      -webkit-transform: scale(0.9);
    }
  }

  @-webkit-keyframes translateY {
    0% {
      -webkit-transform: translateY(0);
    }

    30% {
      -webkit-transform: translateY(30px);
    }

    80% {
      -webkit-transform: translateY(-20px);
    }

    100% {
      -webkit-transform: translateY(0);
    }
  }

  @keyframes translateY {
    0% {
      -webkit-transform: translateY(0);
    }

    30% {
      -webkit-transform: translateY(30px);
    }

    80% {
      -webkit-transform: translateY(-20px);
    }

    100% {
      -webkit-transform: translateY(0);
    }
  }
</style>
<!-- 圆圈动画 -->
<div class="round-wrap bui-box-center">
  <div class="round-animate">
    <div class="round-outer animate-rotation"></div>
    <div class="round-inner animate-rotation-inner"></div>
    <div class="round-light animate-rotation-reverse"></div>
    <div class="round-main">
      <div class="round-scan animate-zoom"></div>
      <div class="round-scan-light animate-translateY"></div>
    </div>
  </div>
</div>